<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .mainBody {
      width: 400px;
      height: 500px;
      background-color: rgb(201, 114, 114);
    }

    .displayer {
      width: 396px;
      height: 60px;
      background-color: rgb(143, 223, 124);
      border: 2px solid black;
      padding-top: 20px;
      font-size: 30px;
      text-align: center;
    }

    .content div {
      width: 80px;
      height: 40px;
      background-color: rgb(96, 119, 224);
      float: left;
      margin: 10px;
      text-align: center;
      padding-top: 20px;
      padding-bottom: 20px;
      font-size: 30px;
    }
  </style>
  <body>
    <div class="mainBody">
      <div class="displayer"></div>
      <div class="content">
        <div class="number">7</div>
        <div class="number">8</div>
        <div class="number">9</div>
        <div class="number">+</div>
        <div class="number">4</div>
        <div class="number">5</div>
        <div class="number">6</div>
        <div class="number">-</div>
        <div class="number">1</div>
        <div class="number">2</div>
        <div class="number">3</div>
        <div class="number">*</div>
        <div class="number">0</div>
        <div class="" onclick="countAll()">=</div>
        <div class="number">/</div>
        <div class=" " onclick="clearAll()">Clear</div>
      </div>
    </div>
  </body>
  <script>
    var elementCal = document.getElementsByClassName("number");
    var displayCal = document.getElementsByClassName("displayer")[0];
    // function NumberOnclick() {
    // 给每个按键插入输入事件
    for (let index = 0; index < elementCal.length; index++) {
      elementCal[index].onclick = function () {
        displayCal.innerHTML =
          displayCal.innerHTML + elementCal[index].innerHTML;
      };
    }
    // }
    function countAll() {
      if (displayCal.innerHTML != "") {
        var amountTo = eval(displayCal.innerHTML);
        console.log(amountTo);
        displayCal.innerHTML = displayCal.innerHTML + "=" + amountTo;
      }
    }
    function clearAll() {
      displayCal.innerHTML = "";
    }
  </script>
</html>
